<script setup lang="ts">
import { switchRoleAPI } from "@/api/serviceProvider";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/stores/user";

const UserStore = useUserStore();

const { t } = useI18n();
const props = defineProps(["show", "userInfo", "isToHome"]);
const emit = defineEmits(["update:show"]);

const closePopup = () => {
  emit("update:show", false);
};

const confirmRule = async () => {
  const res = await switchRoleAPI(active.value);
  if (res.code === 0) {
    emit("update:show", false);
    UserStore.getUser();

    if (props.isToHome) {
      uni.reLaunch({
        url: "/pages/home/index",
      });
    }
  } else {
    uni.$u.toast(res.msg);
  }
};

const active = ref<number>(1);
const switchRule = (type: number | string) => {
  active.value = type as number;
};
defineExpose({
  active,
});
</script>

<template>
  <fui-bottom-popup zIndex="9999" :show="show" @close="closePopup">
    <view class="box">
      <view class="header flex-center">
        {{ t("serviceProvider.SelectARole") }}
      </view>

      <view class="content">
        <view
          class="flex-center-column"
          :class="{ active: active == 1 }"
          @click="switchRule(1)"
        >
          {{ t("serviceProvider.RegularUsers") }}
        </view>
        <view
          class="flex-center-column"
          :class="{ active: active == 2 }"
          @click="switchRule(2)"
        >
          {{ t("serviceProvider.ServiceProviders") }}
        </view>
      </view>
      <view class="role-confirm flex-center" @click="confirmRule">{{
        t("common.confirm")
      }}</view>

      <image
        src="@/static/image/Vector.png"
        @click="emit('update:show', false)"
        style="width: 28rpx; height: 28rpx"
        mode="widthFix"
        class="iconClose"
      ></image>
    </view>
    <fui-safe-area></fui-safe-area>
  </fui-bottom-popup>
</template>

<style scoped lang="scss">
.box {
  height: 320px;
  position: relative;

  .header {
    height: 120rpx;
    border-bottom: 1px solid #f0f0f0;
    font-size: 36rpx;
  }

  .content {
    padding: 48rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50rpx;

    & > view {
      width: 100%;
      background-color: $auxiliary-color;
      height: 200rpx;
      border-radius: 20rpx;
      color: $subject-color;

      &.active {
        background-color: $subject-color;
        color: #ffffff;
      }
    }
  }

  .role-confirm {
    margin: 48rpx;
    border: 1px solid $subject-color;
    border-radius: 16rpx;
    color: $subject-color;
    height: 96rpx;
  }

  .iconClose {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
</style>
